<template>
  <div>
    <div class="screenPriceList">
      <h2>{{price.name}}</h2>
      <div class="screenPriceListTop">
        <input type="tel" data-key="minPrice" :placeholder="price.children[0].name" @input="minPriceChange"
               :value="priceData.min_price">
        <input type="tel" data-key="maxPrice" :placeholder="price.children[1].name" @input="maxPriceChange"
               :value="priceData.max_price">
      </div>
    </div>

    <div class="screenPriceList">
      <h2>{{discount.name}}</h2>
      <div class="screenPriceListBottom">
        <view class="zy-slider">
          <sliderTwoWay :leftMin="discount.children[0].value" :leftMax="discount.children[1].value"
                        :rightMin="discount.children[0].value" :rightMax="discount.children[1].value"
                        :leftValue="priceData.leftValue" :rightValue="priceData.rightValue"
                        @getTowValue="getTowValue"
          ></sliderTwoWay>
        </view>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions} from "vuex";
  import {cateAction2} from "@/store/funnames";
  import sliderTwoWay from "@/components/slider-two-way";
  export default {
    props: ['price', 'discount'],
    data() {
      return {
        timerId: ''
      };
    },
    components: {
      sliderTwoWay
    },
    computed: {
      ...mapState('cate2', ['priceData'])
    },
    methods: {
      ...mapMutations('cate2', {
        updatePrice: cateAction2.ACTION_PRICE_UPDATE
      }),
      ...mapActions('cate2', ['getGoodsCount']),
      getTowValue(leftValue, rightValue) {
        this.updatePriceData({leftValue: leftValue, rightValue: rightValue})
      },
      minPriceChange: function (e) {
        this.updatePriceData({ lowPrice: e.target.value})
      },
      maxPriceChange: function (e) {
        this.updatePriceData({heighPrice: e.target.value})
      },
      updatePriceData(params) {
        this.updatePrice(params)
        if (!this.$wx.isNull(this.timerId)) {
          clearTimeout(this.timerId)
        }
        this.timerId = setTimeout(() => {
          this.getGoodsCount()
          this.$root.$eventHub.$emit('requestGoods2', true)
        }, 300)
      }
    },
  };
</script>

<style>
</style>
